<%@ page language="java" contentType="text/html; charset=utf-8"
		 pageEncoding="utf-8"%>
<%@include file="../base.jsp"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

	<head>
		<title>设置签到点</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no" />
		<link rel="stylesheet" href="themes/metro/easyui.css" />
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=eX0oWIhkTt7PMIWp8r2t0MussrF2CKSW"></script>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
		<script type="text/javascript" src="${path}/js/myjs/myutils.js?random=<%=Math.random()%>"></script>

		<style>
			body,
			html,
			#allmap {
				width: 100%;
				height: 100%;
				overflow: hidden;
				margin: 0;
				font-family: "微软雅黑";
				background-color: white;
			}
			/*.easyui-panel {
				padding: 10px;
				margin-bottom: 15px;
				width: 100%;
			}
			
			.easyui-textbox {
				margin: 5px;
			}
			*/
			
			.easyui-linkbutton {
				width: 100%;
			}
			
			.wxl-panel {
				width: 100%;
				padding: 10px 5px;
			}
			
			.BMap_Marker img {
				border-radius: 18px;
			}
		</style>
		<script type="text/javascript">
			//row data
			var _parameter1_iframedialog = ${paramValues.parameter1_iframedialog[0]};
			var _areaId = _parameter1_iframedialog.id;
			var _areaName = _parameter1_iframedialog.name;
		</script>
	</head>

	<body style="margin: 3px;">
		<div class="easyui-layout" style="width:100%;height:100%;">
			<div id="content" region="center" title="地图展示" style="padding:0px;">
				<div id="allmap"></div>
			</div>
			<div region="east" split="true" title="操作页面" style="width:320px; background-color: #F4F4F4;">

				<div class="easyui-panel" title="添加签到点" collapsible="true" style="width:100%;height:auto;padding:10px; margin-bottom: 15px;">
					<div style="margin-bottom:10px">
						<div>所属区域名称</div>
						<input class="easyui-textbox" style="width:100%;height:32px" readonly="readonly" id="areaName">
					</div>
					<div style="margin-bottom:10px">
						<div>点击地图选中签到点</div>
						<input class="easyui-textbox" style="width:100%;height:32px" readonly="readonly" id="selectloglat">
					</div>
					<div style="margin-bottom:10px">
						<div>签到点名称</div>
						<input class="easyui-textbox" data-options="prompt:'请输入名称',validType:'text'" style="width:100%;height:32px" id="signpointname">
					</div>
					<div style="margin-bottom:10px">
						<div>签到点半径（米）</div>
						<input class="easyui-textbox" data-options="prompt:'请输入半径',validType:'text'" style="width:100%;height:32px" id="radius">
					</div>
					<div style="margin-bottom:10px">
						<div>签到点模式</div>
						<select id="signMode" class="easyui-combobox" name="dept" style="width:100%;height:32px"
								data-options={"editable":false}>
							<option value="">请选择</option>
							<option value="1">不拍照</option>
							<option value="2">拍照</option>
						</select>
					</div>
					<a href="#" class="easyui-linkbutton" id="setsignpoint">添加</a>
				</div>
				
				<%--<div class="easyui-panel" title="删除签到点" collapsible="true" style="width:100%;height:auto;padding:10px;margin-bottom: 15px;">
					<div style="margin-bottom:10px">
						<div>请先选择签到点</div>
						<input class="easyui-textbox" style="width:100%;height:32px" readonly="" id="signpointnamedel">
					</div>
					<a href="#" class="easyui-linkbutton" id="delsignpoint">删除</a>
				</div>--%>

				<%--<div class="easyui-panel" title="签到点列表" collapsible="true" style="width:100%;height:auto;padding:10px;margin-bottom: 15px;">
					<div style="margin-bottom:10px">
						<div>无</div>
					</div>
				</div>--%>
			</div>
		</div>
	</body>

</html>

<script type="text/javascript">
	$(function(){
		$("#areaName").textbox("setValue",_areaName);
	})
	// 百度地图API功能
	var map = new BMap.Map('allmap');
	var lng = "";
	var lat = "";

	window.onload = function() {　
		var poi = new BMap.Point(121.537729, 31.234375);
		map.centerAndZoom(poi, 15);
		map.enableScrollWheelZoom();
	}

	//
	/*
	 * 添加签到点
	 */
	map.addEventListener("click", function(e) {
		lng = e.point.lng;
		lat = e.point.lat;
		$('#selectloglat').textbox('setValue', e.point.lng + "," + e.point.lat);
	});

	$('#setsignpoint').bind('click', function() {
		var point = $('#selectloglat').textbox('getValue');
		var name = $('#signpointname').textbox('getValue');
		var radius = $('#radius').textbox('getValue');
		var signMode = $('#signMode').combobox('getValue');
		if(point.length == 0) {
			$.messager.alert('提示', '请先在地图上选择签到点');
			return;
		}
		if(name.length == 0) {
			$.messager.alert('提示', '请输入签到点名称');
			return;
		}
		if(radius.length == 0) {
			$.messager.alert('提示', '请输入半径');
			return;
		}
		if(signMode.length == 0) {
			$.messager.alert('提示', '请选择签到模式');
			return;
		}

		var pointarr = point.split(',');

		// ajax
		var _path = "/zpmng/";
		var _url = "/admin123/coding/owSignAddress/owSignAddressAjax_addData.action";
		_url = _path + _url;
		var _param = {};
		_param.owAreaId = _areaId;
		_param.name = name;
		_param.lng = lng;
		_param.lat = lat;
		_param.radius = radius;
		_param.signMode = signMode;
		$.post(_url,_param,function(data){
			data = JSON.parse(data);
			messager_show(data[0].responseContent,3000);
			if(data[0].responseCode == 1){
				addSignPoint(new BMap.Point(parseFloat(pointarr[0]), parseFloat(pointarr[1])), name);
			}
		});

	});

	function addSignPoint(point, name) {
		var marker = new BMap.Marker(point); //创建marker对象
		var label = new BMap.Label(name, {
			offset: new BMap.Size(0, 27)
		});
		marker.setLabel(label);
		label.setStyle({
			color: "#E12E33",
			fontSize: "13px",
			fontFamily: "微软雅黑",
			border: "none",
			borderRadius: "0px",
			padding: "0px",
			backgroundColor: "rgba(0,0,0,0)",
			fontWeight: "bold"
		});
		map.addOverlay(marker);
		marker.setAnimation(BMAP_ANIMATION_DROP);

		$('#selectloglat').textbox('setValue', "");
		$('#signpointname').textbox('setValue', "");

		marker.addEventListener("click", function(e) {
			$('#signpointnamedel').textbox('setValue', name);
			markerdel = marker;
		})
	}

	/*
	 * 删除签到点
	 */
	var markerdel = null;
	$('#delsignpoint').bind('click', function() {
		var name = $('#signpointnamedel').textbox('getValue');
		if(name.length == 0) {
			$.messager.alert('提示', '请先选择签到点');
			return;
		}
		$.messager.confirm('提示', '确认删除' + name + "签到点?", function(r) {
			if(r) {
				if(markerdel != null) {
					markerdel.remove();
				}
				$('#signpointnamedel').textbox('setValue', "");
			}
		});
	});

	// 添加缩放控件
	var navigationControl = new BMap.NavigationControl({
		// 靠左上角位置
		anchor: BMAP_ANCHOR_TOP_LEFT,
		// LARGE类型
		type: BMAP_NAVIGATION_CONTROL_LARGE,
		// 启用显示定位
		enableGeolocation: true
	});
	map.addControl(navigationControl);
</script>